<template>
  <div class="menu-manag-page" style="display: flex; height: 100%">
    <div style="width: 250px; background-color: white; border-right: 1px solid #dadada">
      <tree ref="mytree" @tree-node-selected="table.treeNodeSelected"></tree>
    </div>
    <div style="flex: 1">
      <pageManage>
        <template #head>
          <div>
            <span class="search-item">所属应用/客户端:</span>
            <cascader
              ref="mycascader"
              class="search-item"
              style="width: 120px"
              :app-type-list="searchFun.appTypeListTra"
              @change="searchFun.appTypeValeChange"
            ></cascader>
          </div>
          <div>
            <span class="search-item">名称:</span>
            <a-input v-model:value="searchFun.searchInfo.name" class="search-item" style="width: 120px"></a-input>
          </div>
          <a-button type="primary" @click="searchFun.searchClick">
            <SearchOutlined />
            查询
          </a-button>
          <a-button style="margin: 0 15px" @click="searchFun.reset">重置</a-button>
        </template>
        <template #middle>
          <div style="display: flex; justify-content: space-between; width: 100%; margin-bottom: 15px">
            <a-button type="primary" @click="cli_newAdd">
              <PlusOutlined />
              新增
            </a-button>
          </div>
          <div class="permission-page-table">
            <a-table
              :columns="table.columns"
              :data-source="portComList"
              :pagination="false"
              :scroll="{ y: table.tableHeight }"
              :loading="table.loading"
            >
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'option'">
                  <div style="display: flex; align-items: center">
                    <a-button type="link" :size="'small'" @click="cli_detail(record)">详情</a-button>
                    <linkButton
                      :record-or-index="record"
                      :use-item="1"
                      @cli-add="cli_add"
                      @cli-edit="cli_edit"
                      @cli-delete="cli_delete"
                    />
                  </div>
                </template>
                <template v-if="column.key === 'type'">
                  {{
                    searchFun.type.find((m) => m.key === record.type)
                      ? searchFun.type.find((m) => m.key === record.type).label
                      : record.type
                  }}
                </template>
              </template>
            </a-table>
          </div>
        </template>
        <template #foot>
          <a-pagination
            v-model:current="pagFun.pagInfo.pageNo"
            show-quick-jumper
            :total="pagFun.pagInfo.total"
            :responsive="false"
            @change="pagFun.onChange"
          />
        </template>
      </pageManage>
    </div>
  </div>
  <!-- 新增 编辑 右侧抽屉  -->
  <com_edit
    v-if="renewEdit"
    :upper-rol="upperRol"
    :app-type-list-tra="searchFun.appTypeListTra"
    :is-show-edit="isShowEdit"
    :is-edit="isEdit"
    :is-detl="isDetl"
    :type-list="searchFun.type"
    :current-item-id="currentItemId"
    @close-edit="closeEdit"
    @create-success="createSuccess"
    @update-success="updateSuccess"
  ></com_edit>
  <!--删除弹框    -->
  <a-modal v-model:visible="deleteFun.isDelete" title="删除" @ok="delete_ok">
    {{ `确认删除 ${deleteFun.del_idx.name} 吗 ?` }}
  </a-modal>
</template>

<script setup>
import { watch, ref, reactive, onMounted, nextTick, computed, toRefs, defineEmits } from 'vue'
import { PlusOutlined, AppstoreOutlined, DatabaseOutlined, DownOutlined, UpOutlined } from '@ant-design/icons-vue'
import factory from './factory'
import com_edit from './components/edit'
import cascader from './components/cascader'
import pageManage from '@/components/pageManageV2'
import tree from './components/tree'
import { message } from 'ant-design-vue'
import linkButton from '@/components/linkButton'

const portComList = ref([])
//==翻页功能======================
const pagFun = reactive({
  pagInfo: { pageNo: 1, pageSize: 10, total: 10 },
  onChange: (page, pageSize) => {
    pagFun.pagInfo.pageNo = page
    pagFun.pagInfo.pageSize = pageSize
  },
})

//==表格================
const table = reactive({
  columns: [
    {
      title: '操作',
      key: 'option',
      width: 140,
    },
    // {
    //   title: '标识',
    //   dataIndex: 'code',
    //   key: 'code',
    // },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '图标',
      dataIndex: 'icon',
      key: 'icon',
    },
    {
      title: '排序',
      dataIndex: 'sort',
      key: 'sort',
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
    },
    {
      title: '路径',
      dataIndex: 'path',
      key: 'path',
    },
    {
      title: '应用',
      dataIndex: 'appName',
      key: 'appName',
    },
    {
      title: '客户端',
      dataIndex: 'clientName',
      key: 'clientName',
    },
  ],
  loading: false,
  tableHeight: 332,
  getTableData: (pag = { ...pagFun.pagInfo, parentId: table.parItm.id }) => {
    table.loading = true
    factory.getTableData(pag).then((res) => {
      table.loading = false
      portComList.value = res.data.dataList
      pagFun.pagInfo.total = Number(res.data.totalCount)
    })
  },
  treeNodeSelected(node) {
    table.parItm = node
    table.parItm.id = node.key
    table.getTableData({ ...pagFun.pagInfo, parentId: table.parItm.id })
  },
  parItm: { name: '菜单管理', id: '-1' },
})
table.getTableData()
onMounted(() => {
  let ele = document.getElementsByClassName('menu-manag-page')
  table.tableHeight = ele[0].offsetHeight - 217
})
// ==大按钮新增====cli_newAdd
const cli_newAdd = () => {
  upperRol.value = table.parItm
  isEdit.value = 'new'
  renewEdit.value = true
  nextTick(() => {
    isShowEdit.value = true
  })
}
//==表格中按钮,编辑,详情,===============
const isShowEdit = ref(false)
const isEdit = ref(0)
const isDetl = ref(false)
const upperRol = ref({}) //上级
const renewEdit = ref(false) //重置抽屉数据使用
const currentItemId = ref('')
const cli_add = (obj) => {
  upperRol.value = obj
  isEdit.value = 'new'
  renewEdit.value = true
  nextTick(() => {
    isShowEdit.value = true
  })
}
const cli_edit = (obj) => {
  upperRol.value = table.parItm
  currentItemId.value = obj.id
  isEdit.value = 'edit'
  renewEdit.value = true
  nextTick(() => {
    isShowEdit.value = true
  })
}
const cli_detail = (obj) => {
  upperRol.value = table.parItm
  currentItemId.value = obj.id
  isEdit.value = 'show'
  renewEdit.value = true
  nextTick(() => {
    isShowEdit.value = true
  })
}
const closeEdit = () => {
  isShowEdit.value = false
  renewEdit.value = false
}
const mytree = ref(null)
const updateSuccess = (newItem) => {
  mytree.value.reNewNode(table.parItm)
  table.getTableData()
}
const createSuccess = (newItem) => {
  mytree.value.reNewNode(table.parItm)
  table.getTableData()
}

//==删除============================
const deleteFun = reactive({
  isDelete: false,
  del_idx: -1,
})
const cli_delete = (item) => {
  deleteFun.isDelete = true
  deleteFun.del_idx = item
}
const delete_ok = () => {
  factory.delete({ id: deleteFun.del_idx.id }).then((res) => {
    deleteFun.isDelete = false
    table.getTableData()
  })
}

/***查询功能************************/
const mycascader = ref(null) //重置多级选择
const searchFun = reactive({
  searchInfo: { appKey: '', name: '' },
  searchClick: () => {
    pagFun.pagInfo.pageNo = 1
    let post = { ...pagFun.pagInfo, ...searchFun.searchInfo, parentId: table.parItm.id }
    table.getTableData(post)
  },
  reset: () => {
    searchFun.searchInfo = { appKey: '', name: '' }
    mycascader.value.changeValue()
  },
  type: [
    { label: '菜单', key: 'MENU' },
    { label: '按钮', key: 'BUTTON' },
    { label: 'PORTAL', key: 'PORTAL' },
    { label: 'PORTLET', key: 'PORTLET' },
  ],
  //所属应用
  appTypeList: [],
  appTypeListTra: computed(() => {
    let arr = searchFun.appTypeList
    arr.forEach((item) => {
      item.label = item.domain
      item.value = item.domain
      item.children = item.list
      item.children.forEach((m) => {
        m.label = m.name
        m.value = m.appKey
        if (m.clientList) {
          m.children = m.clientList
          m.children.forEach((n) => {
            n.label = n.name
            n.value = n.clientKey
          })
        }
      })
    })
    return arr
  }),
  appTypeValeChange: (val) => {
    searchFun.searchInfo.appKey = val.value
  },
  getAppTypeList: () => {
    factory.getAppTypeList().then((res) => {
      searchFun.appTypeList = res.data
    })
  },
})
searchFun.getAppTypeList()
</script>

<style lang="less" scoped>
.search-item {
  margin-right: 15px;
}
</style>
